import React, { useState, useEffect, createContext, useRef } from "react";
import styles from "./App.module.scss"
import XxListViewComponent1 from "./ui/xx-list-view/XxListViewComponent1/xx-list-view";
import XxInsModuleComponent1 from "./ui/ins-module-view/ins-module-view";
import JxListComponent from "./ui/jx-list/jx-list";
import { Form, message } from "antd";
import http from "./utils/request";
import { loadDealerStatisticBarDataAPI, loadDealerStatisticNoBarDataAPI } from "./api/api";
import XxDingJiaComponent from "./ui/dingjiaxishu/diingjiaxishu-view";
import XxFeiyonglvComponent from "./ui/feiyonglv/feiyonglv-view";
import AppHeaderComponent from "./ui/app-header/AppHeaderComponent";
import XxweixiuChanzhiComponent from "./ui/weixiuchanzhi/weixiuchanzhi";
import XxPeifulvComponent from "./ui/peifulv-view/peifulv-view";
import ReportView from "./ui/report-view/report-view";
import TuixiuViewModule from "./ui/tuixiuguize/tuixiu-view";
import ModalConditionComponent from "./component/conditionModal";
import CarRiskMomenyModel from "./ui/car-risk-moneny/car-risk-moneny";
import UnCarRiskMomenyModel from "./ui/nocar-risk-moneny/UnCarRiskMomenyModel";
import AaveragePremiumPerUnit from "./ui/averagePremiumPerUnit/averagePremiumPerUnit";
import { getUrlParam } from "./utils/getUrlData";
import dayjs from "dayjs";
const Context = createContext()
const { Provider } = Context;
const App = () => {
    const tuixiuRef = useRef();
    const jxlbRef = useRef();
    const [baseData, setBaseData] = useState({});
    const [othData, setOthData] = useState({});
    // 存放查询参数
    const [params, setParams] = useState({
        startTime: getUrlParam("startTime") || dayjs().format("YYYYMM"),
        endTime: getUrlParam("endTime") || dayjs().format("YYYYMM"),
        factoryCode: getUrlParam("factoryCode") ? decodeURI(getUrlParam("factoryCode")).split(",") : [],
        factoryName: getUrlParam("factoryName") ? decodeURI(getUrlParam("factoryName")).split(",") : [],
        insuredCode: getUrlParam("insuredCode") ? decodeURI(getUrlParam("insuredCode")).split(",") : [],
        insuredName: getUrlParam("insuredName") ? decodeURI(getUrlParam("insuredName")).split(",") : [],
        insuredBrand: getUrlParam("insuredBrand") ? decodeURI(getUrlParam("insuredBrand")).split(",") : [],
        insuredBrandName: getUrlParam("insuredBrandName") ? decodeURI(getUrlParam("insuredBrandName")).split(",") : [],
        insuredGroup: getUrlParam("insuredGroup") ? decodeURI(getUrlParam("insuredGroup")).split(",") : [],
        insuredGroupName: getUrlParam("insuredGroupName") ? decodeURI(getUrlParam("insuredGroupName")).split(",") : [],
        secComCode: getUrlParam("secComCode") ? decodeURI(getUrlParam("secComCode")).split(",") : [],
        secComName: getUrlParam("secComName") ? decodeURI(getUrlParam("secComName")).split(",") : [],
        salesTeam: getUrlParam("salesTeam") ? decodeURI(getUrlParam("salesTeam")).split(",") : [],
        salesTeamName: getUrlParam("salesTeamName") ? decodeURI(getUrlParam("salesTeamName")).split(",") : [],
        salesName: getUrlParam("salesName") ? decodeURI(getUrlParam("salesName")).split(",") : [],
        businManagerName: getUrlParam("businManagerName") ? decodeURI(getUrlParam("businManagerName")).split(",") : [],
        useNatureCode: getUrlParam("useNatureCode") ? decodeURI(getUrlParam("useNatureCode")).split(",") : [],
        useNatureName: getUrlParam("useNatureName") ? decodeURI(getUrlParam("useNatureName")).split(",") : [],
        serviceNature: getUrlParam("serviceNature") ? decodeURI(getUrlParam("serviceNature")).split(",") : [],
        serviceNatureName: getUrlParam("serviceNatureName") ? decodeURI(getUrlParam("serviceNatureName")).split(",") : [],
        fuelType: getUrlParam("fuelType") ? decodeURI(getUrlParam("fuelType")).split(",") : [],
        fuelTypeName: getUrlParam("fuelTypeName") ? decodeURI(getUrlParam("fuelTypeName")).split(",") : [],
        seriesCode: getUrlParam("seriesCode") ? decodeURI(getUrlParam("seriesCode")).split(",") : [],
        seriesName: getUrlParam("seriesName") ? decodeURI(getUrlParam("seriesName")).split(",") : [],
        subsidyFlag: getUrlParam("subsidyFlag") ? getUrlParam("subsidyFlag") : "",
    });


    // 控制加载状态
    const [loading, setLoading] = useState(true)
    // 获取数据
    const loadData = (object) => {
        http.post({
            url: loadDealerStatisticBarDataAPI,
            params: {
                ...object,
            },
            before: () => setLoading(true),
            success: res => {
                setBaseData({
                    ...res.data,
                    resCode: "0000"
                })
            },
            failure: msg => message.error(msg),
            complete: () => setLoading(false)
        })

        // 获取第2个接口数据
        http.post({
            url: loadDealerStatisticNoBarDataAPI,
            params: {
                ...object,
            },
            before: () => { },
            success: res => {
                console.log("setOthData", res);
                setOthData({
                    ...res.data,
                    resCode: "0000"
                })
            },
            failure: msg => {

            },
            complete: () => { }
        })

        // 重置经销商列表的查询条件
        jxlbRef.current.setParams({
            ...params,
            pageSize: 20,
            pageIndex: 1
        })
        // 重置推修列表的查询条件
        tuixiuRef.current.setParams({
            ...params,
            pageSize: 20,
            pageIndex: 1
        })
    }





    // 初始加载数据
    useEffect(() => {
        loadData({ ...params })

    }, [params])


    // 抽屉相关控制代码start
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };

    // 抽屉相关控制代码end



    // 车险保费props
    const carRiskProps = {
        prentParams: params,
        carSumPremium: baseData.carSumPremium || 0.00, // 车险保费
        newCarSumPremium: baseData.newCarSumPremium || 0.00, // 新保保费（车险）
        renewalCarSumPremium: baseData.renewalCarSumPremium || 0.00, // 续保保费（车险）
        reinsurCarSumPremium: baseData.reinsurCarSumPremium || 0.00, // 转保保费（车险）
        targetCarSumPremium: baseData.targetCarSumPremium || 0.00 // 目标保费（车险）
    }

    // 非车险保费props
    const unCarRiskProps = {
        noCarSumPremium: baseData.noCarSumPremium || 0.00, // 非车险保费
        targetNoCarSumPremium: baseData.targetNoCarSumPremium || 0.00, // 目标保费（非车）
    }

    // 单均保费props
    const averProps = {
        averPremium: baseData.averPremium || 0.00, // 单均保费
        newAverPremium: baseData.newAverPremium || 0.00, // 新保单均保费
        renewalAverPremium: baseData.renewalAverPremium || 0.00, // 续保单均保费
        reinsurAverPremium: baseData.reinsurAverPremium || 0.00, // 转保单均保费
        carAverPremium: baseData.carAverPremium || 0.00, // 单均保费（车险）
        noCarAverPremium: baseData.noCarAverPremium || 0.00, // 非车单均保费
    }

    // 承保台数props
    const insProps = {
        syCars: baseData.syCars || 0, // 商业险台数
        syNewCars: baseData.syNewCars || 0,// 新保台数（商业险）
        syRenewalCars: baseData.syRenewalCars || 0, // 续保台数（商业险）
        syRenewalSecCars: baseData.syRenewalSecCars || 0,// 续保次新车台数（商业险）
        syRenewalOldCars: baseData.syRenewalOldCars || 0,// 续保旧车台数（商业险）
        syReinsurCars: baseData.syReinsurCars || 0,// 转保台数（商业险）
        newCars: baseData.newCars || 0,// 新车销量
        targetCars: baseData.targetCars || 0,// 目标台数
        newCarShare: baseData.newCarShare || 0.00,// 新车份额
        targetCarShare: baseData.targetCarShare || 0.00,// 目标份额
        syRenewalRate: baseData.syRenewalRate || 0.00, // 续保率（商业险）
        syRenewalSecRate: baseData.syRenewalSecRate || 0.00, // 次新车续保率（商业险）
        syRenewalOldRate: baseData.syRenewalOldRate || 0.00, // 旧车续保率（商业险）
        syReRate: baseData.syReRate || 0.00 // 续转保率（商业险）
    }

    // 定价props
    const dingjiaProps = {
        priceRate: baseData.priceRate || 0.00, // 自主定价系数
        newPriceRate: baseData.newPriceRate || 0.00, // 新保自主定价系数
        renewalPriceRate: baseData.renewalPriceRate || 0.00, // 续保自主定价系数
        reinsurPriceRate: baseData.reinsurPriceRate || 0.00, // 转保自主定价系数
    }

    // 维修产值props
    const weixiuProps = {
        pushSpFee: baseData.pushSpFee || 0.00, // 推修金额 配件金额
        pushWhFee: baseData.pushWhFee || 0.00, // 推修金额 工时
        repairSpFee: baseData.repairSpFee || 0.00, // 返修金额 配件金额
        repairWhFee: baseData.repairWhFee || 0.00, // 返修金额 工时
        repairFeeRatio: baseData.repairFeeRatio || 0.00, // 标的车损返修 金额
        repairCotRatio: baseData.repairCotRatio || 0, //  标的车损返修 台数
        sumVerilossCot: baseData.sumVerilossCot || 0, // 标的车损核损 台数
        sumVerilossFee: baseData.sumVerilossFee || 0.00, // 标的车损核损 金额
    }

    // 理赔定价props
    const lipeiProps = {
        fxGsPrice: baseData.fxGsPrice || 0.00, // 返修工时定价（工时金额/返修台数）
        txGsPrice: baseData.txGsPrice || 0.00, // 推修工时定价（工时金额/推修台数）
        fxPjPrice: baseData.fxPjPrice || 0.00, // 返修配件定价（配件金额/返修台数）
        txPjPrice: baseData.txPjPrice || 0.00, // 推修配件定价（配件金额/推修台数）
    }

    // 赔付率props
    const peifuProps = {
        claimRatio: othData.claimRatio || 0.00,// 满期赔付率（当年保单）
        lastClaimRatio: othData.lastClaimRatio || 0.00, // 满期赔付率（上年保单）
        csClaimRatio: othData.csClaimRatio || 0.00, // 满期赔付率（当年保单—车损险）
        lastCsClaimRatio: othData.lastCsClaimRatio || 0.00, // 满期赔付率（上年保单—车损险）
        dnlnClaimRatio: othData.dnlnClaimRatio || 0.00 // 历年制赔付率（滚动一年）
    }

    // 代码单赔付情况
    const dmProps = {
        prentParams: params,
        sumVeriPayCot: othData.sumVeriPayCot || 0, // 标的车损险赔款台数
        sumVeriPayFee: othData.sumVeriPayFee || 0.00, // 标的车损险赔款金额
        szCarPropSumPaid: othData.szCarPropSumPaid || 0.00, // 三者车物/物损金额
        szPersonSumPaid: othData.szPersonSumPaid || 0.00, // 三者人伤金额
        otherSumPaid: othData.otherSumPaid || 0.00, // 其他赔款
        carLossFeeRatio: othData.carLossFeeRatio || 0.00, // 标的车损（赔款比例）
        szLossFeeRatio: othData.szLossFeeRatio || 0.00, // 三者车物（赔款比例）
        szPersonFeeRatio: othData.szPersonFeeRatio || 0.00, // 三者人伤（赔款比例）
        otherFeeRatio: othData.otherFeeRatio || 0.00, // 其他赔款（赔款比例）
        validCaseCnt: othData.validCaseCnt || 0, // 有效立案数量
        invalidCaseCnt: othData.invalidCaseCnt || 0, // 无效案件/销案数量
    }

    // 费用率
    const feiyProps = {
        syFeeRate: othData.syFeeRate || 0.00, // 商业险费用率
        syNewFeeRate: othData.syNewFeeRate || 0.00, // 新保费用率（商业险）
        syRenewalFeeRate: othData.syRenewalFeeRate || 0.00, // 续保费用率（商业险）
        syReinsurFeeRate: othData.syReinsurFeeRate || 0.00, // 转保费用率（商业险）
        jqFeeRate: othData.jqFeeRate || 0.00, // 交强险费用率
        jqNewFeeRate: othData.jqNewFeeRate || 0.00, // 新保费用率（交强险）
        jqRenewalFeeRate: othData.jqRenewalFeeRate || 0.00, // 续保费用率（交强险）
        jqReinsurFeeRate: othData.jqReinsurFeeRate || 0.00, // 转保费用率（交强险）
    }

    return (
        <>
            <Provider >
                <div className={styles.page}>
                    <ModalConditionComponent
                        setShow={onClose}
                        show={open}
                        setParams={setParams}
                        prentParams={params}
                    />
                    <AppHeaderComponent showDrawer={showDrawer} />

                    {/* 新布局 */}
                    <div className="center">
                        <div className="page-left">
                            <div className="left-1">
                                <CarRiskMomenyModel
                                    // 车险保费
                                    style={{
                                        width: 450
                                    }}
                                    {...carRiskProps}
                                />
                                <UnCarRiskMomenyModel
                                    style={{
                                        width: 415
                                    }}
                                    {...unCarRiskProps}
                                />
                                <AaveragePremiumPerUnit
                                    style={{
                                        width: 450
                                    }}
                                    {...averProps}
                                />
                            </div>
                            <div className="left-2">
                                <div className="left-2-1">
                                    <div className="left-2-1-1">
                                        <XxPeifulvComponent
                                            {...peifuProps}
                                        />
                                    </div>
                                    <div className="left-2-1-2">
                                        <JxListComponent
                                            prentParams={params}
                                            onRef={jxlbRef}
                                        />
                                    </div>
                                </div>
                                <div className="left-2-2">
                                    <div className="left-2-2-top">
                                        <XxInsModuleComponent1 {...insProps} />
                                    </div>
                                    <div className="left-2-2-bottom">
                                        <ReportView
                                            {...dmProps}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="page-right">
                            <div style={{ height: 300 }}>
                                <XxweixiuChanzhiComponent
                                    {...weixiuProps}
                                />
                            </div>
                            <div style={{
                                height: 200,
                                display: 'flex'
                            }}>
                                <div style={{ width: '50%' }}>
                                    {/* 定价系数 */}
                                    <XxDingJiaComponent {...dingjiaProps} />
                                </div>
                                <div style={{ width: '50%' }}>
                                    <XxFeiyonglvComponent
                                        {...feiyProps}
                                    />
                                </div>

                            </div>
                            <div className="right-3">
                                <XxListViewComponent1  {...lipeiProps} />
                            </div>
                            <div className="right-4">
                                <TuixiuViewModule
                                    onRef={tuixiuRef}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </Provider>

        </>
    )
}
export default App;